<template>
	<view class="relative" :class="bgColor">
		<view style="height:var(--status-bar-height);" class="wd-100"></view>
		<view class="flex justify-between align-center plr-20" style="height:44px">
			<view v-if="isBackBtn" @click="backTo" class="iconfont icon-fanhui2 h3"></view>
			<slot name="right"></slot>
		</view>
		<view style="top:50%;left:50%;transform: translate(-50%,40%);" class="h4 absolute">{{title}}<slot name="icon"></slot></view>
	</view>
</template>

<script>
	export default {
		props:{
			// 用户点击返回是是否保存当前page数据
			isSaved: {
				type: [Boolean, String],
				default: false
			},
			// 如果需要保存需要接收一个key值
			storageKey: {
				type: String,
				default: "content"
			},
			// 接收对象
			storageData: {
				type: Object,
				default: ""
			},
			// 背景色
			bgColor:{
				type: String,
				default: ""
			},
			// 是否有返回键
			isBackBtn: Boolean,
			// 标题
			title: String,
		},
		methods: {
			paramsValidate (parmas) {
				// 判断对象所有属性是否没值
				let num = 0
				for (var key in parmas) {
					if (parmas[key] != 0) {
						num ++
					}
				}
				return num
			},
			backTo () {
				if (this.isSaved) {
					// 问用户是否保存
					if (this.paramsValidate(this.storageData) === 0) {
						uni.navigateBack({
							delta:1
						})
						return
					}
					uni.showModal({
						title:"警告",
						content:"即将离开这个页面, 请问是否保存?",
						cancelText:"不保存",
						confirmText: "保存",
						success: res => {
							if (res.confirm) {
								uni.setStorage({
									key: this.storageKey,
									data:JSON.stringify(this.storageData),
									success: res => {
										uni.showToast({
											title:"已保存草稿"
										})
									}
								})
							}
							if (res.cancel) {
								uni.removeStorage({
									key:this.storageKey,
									success: res => {
										uni.showToast({
											title:"已清空草稿"
										})
									}
								})
							}
							uni.navigateBack({
								delta: 1
							})
						}
					})
				}else {
					uni.navigateBack({
						delta:1
					})
				}
			}
		}
	}
</script>

<style>

</style>
